<template>
  <div class="shopItem">
    <div class="container">
      <el-carousel trigger="click"  :height="carHeight + 'px'" :autoplay="false">
        <el-carousel-item v-for="(item,index) in shopList" :key="index" :label="tagList[index]">
          <div class="item_cont" ref="itemsRef">
            <div class="items" v-for="(item2,index2) in item" :key="index2">
              <div class="imagePosition">
                <img :src="item2.image1" @load="imgload" alt="img">
              </div>
              <div class="image1">
                <img :src="item2.image1" alt="">
              </div>
              <div class="image2">
                <img :src="item2.image2" alt="">
                <div class="image_box">
                  <a href="#">{{item2.image_view}}</a>
                </div>
              </div>
              <div class="text_cont">
                <div class="title_cont flexAlign">
                  <a href="#">{{item2.title}}</a>
                  <i class="iconfont icon-xihuan" @click="likeShop(item2.id)"></i>
                </div>
                <div class="item_text">
                  <h2>{{item2.text}}</h2>
                </div>
                <div class="price">
                  <h2>{{item2.price}}</h2>
                  <h3 @click="addShop(item2.id)">{{item2.cart}}</h3>
                </div>
              </div>
            </div>
          </div>
        </el-carousel-item>
      </el-carousel>
      <h2 class="shopTis">LOAD MORE...</h2>
    </div>
  </div>
</template>

<script>
export default {
  data () {
    return {
      shopList: [],
      carHeight: '',
      tagList: []
    }
  },
  async created () {
    const { data: res } = await this.$http.get('shopItem')
    // console.log(res.data)
    const ArrivalsArr = []
    const SellersArr = []
    const RateArr = []
    for (const value of res.data) {
      if (value.tag === 'New Arrivals') {
        ArrivalsArr.push(value)
      } else if (value.tag === 'Best Sellers') {
        SellersArr.push(value)
      } else {
        RateArr.push(value)
      }
    }
    this.shopList.push(ArrivalsArr)
    this.shopList.push(SellersArr)
    this.shopList.push(RateArr)
    this.tagList.push(ArrivalsArr[0].tag)
    this.tagList.push(SellersArr[0].tag)
    this.tagList.push(RateArr[0].tag)
  },
  methods: {
    imgload () {
      this.$nextTick(() => {
        this.carHeight = this.$refs.itemsRef[0].clientHeight + 80
      })
    },
    // 收藏商品
    async likeShop (itemId) {
      const { data: res } = await this.$http.post(`addmyshoplike?token=${this.$store.state.token}`, {
        shop_item_id: itemId,
        user_id: this.$store.state.userId
      })
      this.$message.success('添加至收藏成功')
      console.log(res)
    },
    // 点击添加购物车
    async addShop (itemId) {
      const { data: res } = await this.$http.post(`addmyshop?token=${this.$store.state.token}`, {
        shop_item_id: itemId,
        user_id: this.$store.state.userId
      })
      const { data: res2 } = await this.$http.get(`getmyshop?token=${this.$store.state.token}`, this.$store.state.userId)
      await this.$store.commit('setNumber', res2.data.length)
      window.sessionStorage.setItem('number', res2.data.length)
      this.$message.success('添加购物车成功')
      console.log(res)
    }
  },
  mounted () {
    window.addEventListener('resize', () => {
      this.imgload()
    }, false)
  }
}
</script>

<style lang="less" scoped>
.item_cont{
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  .items{
    width: 18.5%;
    overflow: hidden;
    position: relative;
    margin-bottom: 1.25rem;
    img{
      width: 100%;
      height: 100%;
    }
    .image1,.image2{
      position: absolute;
      left: 0;
      top: 0;
      cursor: pointer;
      transition: all 0.5s;
    }
    .image1{
      z-index: 3;
      opacity: 1;
    }
    .image2{
      overflow: hidden;
      z-index: 2;
      opacity: 0;
      img{
        transition: all 9s;
      }
      .image_box{
        position: absolute;
        text-align: center;
        padding: 0.32rem;
        left: 0;
        right: 0;
        bottom: -1.4rem;
        transition: all 0.5s;
        width: 100%;
        background-color: #ffffffde;
      }
    }
    .text_cont{
      padding: 0.47rem 0;
      .title_cont{
        i{
          font-size: 0.5rem;
          cursor: pointer;
        }
      }
      .title_cont i:hover{
        color: #eb2323;
      }
      .item_text{
        h2{
          font-size: 0.4rem;
          color: #333;
          margin: 0.21rem 0;
          font-weight: 400;
        }
      }
      .price{
        height: 1.1rem;
        overflow: hidden;
        position: relative;
      }
    }
  }
}
.price h2{
  position: absolute;
  left: 0;
  top: 20%;
  font-size: 0.43rem;
  font-weight: 400;
  color: #888;
  transition: all 0.5s;
}
.price h3{
  color: #666;
  font-size: 0.43rem;
  font-weight: 400;
  position: absolute;
  left: 0;
  top: 120%;
  text-decoration: underline;
  transition: all 0.5s;
  padding: 0.15rem 0;
  cursor: pointer;
}
.items:hover .image1{
  z-index: 2;
  opacity: 0;
}
.items:hover .image2{
  z-index: 3;
  opacity: 1;
}
.items:hover .image2 img{
  transform: scale(1.2);
}
.items:hover .price h2{
  top: -70%;
}
.items:hover .price h3{
  top: 20%;
}
.image_box a{
  font-size: 0.43rem;
  line-height: 25px;
  font-weight: 400;
  color: #666;
  transition: all 0.3s;
}
.items:hover .image2 .image_box{
  bottom: 0;
}
.title_cont a{
  font-size: 0.375rem;
  color: #6c6b6b;
  font-weight: 400;
}
.image_box a:hover,.title_cont a:hover,.price h3:hover{
  color: #eb2323;
}
.el-carousel__item{
  padding-top: 2.19rem;
}
.shopTis{
  text-align: center;
  font-size: 0.41rem;
  font-weight: 400;
  letter-spacing: 5px;
  text-transform: uppercase;
}
@media screen and (max-width:992px){
  .item_cont{
    .items{
      width: 47%;
    }
  }
}
@media screen and (max-width:576px){
  .item_cont{
    padding-top: 1rem;
    .items{
      width: 100%;
      .text_cont{
        i{
          font-size: 0.9rem !important;
        }
        .title_cont a{
          font-size: 0.6rem;
        }
        .item_text h2{
          font-size: 0.8rem;
        }
      }
    }
  }
  .el-carousel__item{
    padding-top: 4rem;
  }
  .price h2, .price h3{
    font-size: 0.7rem;
  }
  .items:hover .price h2{
    top: -88%;
  }
  .items:hover .price h3{
    top: 0%;
  }
}
</style>
